<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style>
			.mui-pull-left {
				color: #FFFFFF;
				line-height: 44px;
			}
			
			.mui-pull-right {
				color: #FFFFFF;
				line-height: 44px;
			}
			
			.mui-title {
				color: #FFFFFF;
			}
			
			.mui-icon.iconfont {
				font-size: 18px;
			}
			
			nav .mui-icon {
				left: 50%;
				margin-left: -12px;
			}
			
			.mui-bar.mui-bar-nav {
				background: #0072dc;
			}
			
			.mui-control-item.text_submain {
				line-height: 32px;
			}
		</style>
	</head>

	<body id='app'>
		<div class="mui-content bg_gray">
			<div id='wrapperTrend' class="mui-scroll-wrapper">
				<div id='scrollTrend' class="mui-scroll">
					<ul class="mui-table-view app-hide" id='container' style="margin-top: 0px;">
						<li @tap="goTrend(trend.Target, trend.TargetID)" v-for="trend in trends" class="mui-table-view-cell">
							<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
							<p>
								<span class="text_main card_username">{{trend.Name}}</span>
								<span class="text_main">{{trend.Hint}}</span>
							</p>
							<p class="card_title text_main">{{trend.Title}}</p>
							<div>
								<p v-if="trend.objType==='topic'" class="card_content_attr text_submain">
									<span class="mui-badge-number ">{{trend.CommentsNumber}}</span>
									<span>{{trend.Content}}</span>
								</p>
								<img v-if="trend.objType==='circle'" :src="trend.CircleImg" style="background: #000000;width: 60px;height: 60px;margin-top: 20px;" />
								<p class="text_note">
									<span class="card_note-fl">来自：{{trend.CircleName}}</span>
									<span class="card_note-fr">{{trend.Datetime}}</span>
								</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
			<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript" charset="utf-8">
				var vm = new Vue({
					el: '#app',
					data: {
						trends: [],
						scrollTrend: {},
						paramObj: {
							PageSize: 6,
							CurPageTrend: 1,
						},
					},
					ready: function() {
						var me = this;
						$('#app .app-hide').show();
						mui.init();
						ui.fixScroll(0);
						me.scrollTrend = ui.setPullToRefresh(this.getTrend);
						document.addEventListener('show', function() {
							mui.plusReady(function() {
								me.getTrend(true);
							})
						});
					},
					methods: {
						goTrend: function(target, targetID){
							if(target==='circle'){
								openPage('../circle/circle.html','circle',{cid: targetID});
							}else if(target === 'question'){
								openPage('../circle/question.html','question',{qid:targetID});
							}
						},
						getTrend: function(isRefresh) {
							var self = this;
							var nomore = false;
							self.paramObj.CurPageTrend = isRefresh ? 1 : self.paramObj.CurPageTrend + 1; // 当前页码

							dynamic.getuserdynamic({ // 请求数据
								PageSize: self.paramObj.PageSize,
								CurPage: self.paramObj.CurPageTrend // 当前页码
							}, function(data) {
								self.trends = isRefresh ? data : self.trends.concat(data); // 拿到数据
								nomore = data.length < self.paramObj.PageSize;
							}, function() {
								ui.clearScrollAnimal(self.scrollTrend.puller, isRefresh, nomore);
							});
						}
					},
				});
			</script>
	</body>

</html>